<style scoped>
    .cdk-container{
        width: 100%;
    }

    .cdk-head{
        position: relative;
        width: 96%;
        padding: 0 2%;
        height: .44rem;
        background: #f2f2f2;

    }

    .cdk-nUse{
        position: absolute;

        bottom: 0;
        font-size: .13rem;
        color: #dd435e;
        top:0;
        margin: auto;
        width: 1.24rem;
        height: .252rem;
        border-radius: .025rem;
        border: 1px solid #db3652;
        background: #ffffff;
    }

    .cdk-yUse{
        position: absolute;
        left: 1.4rem;
        bottom: 0;
        font-size: .13rem;
        color: #fff;
        top:0;
        margin: auto;
        width: 1.24rem;
        height: .252rem;
        border-radius: .025rem;
        border: 1px solid #db3652;
        background: #db3652;
    }

    .cdk-message{
        position: absolute;
        bottom: 0;
        right:.25rem;
        top:0;
        margin: auto;
        width: .225rem;
        height: .15rem;
        background: url("../images/message.png") center no-repeat;
        background-size: cover;
    }

    .cdk-circle{
        position: absolute;

        right:.175rem;
        top:.07rem;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
        background: #db3652;
        text-align: center;
        line-height: .15rem;
        font-size: 12px;
        color: #fff;
    }

    .trangleRight{
        float: right;
        margin-top: .21rem;
        margin-right: .1rem;
        display: block;
        width: .05rem;
        height: .05rem;

        border-bottom: 1px solid #db3652;
        border-right: 1px solid #db3652;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);

    }

    .dn{
        display: none;
    }

    .cdk-show{
        float: left;
        width: 100%;
        background: #fff;
        height: auto;
    }

    .cdk-myKey{
        position: relative;
        margin: 0 auto;
        margin-top: .15rem;
        width:2.965rem;
        height: 1.05rem;
        border-radius: 4px;
        border: 1px solid #cccccc;
    }

    .cdk-status{
        position: absolute;
        right: 20%;
        top:15%;
    }

    .cdk-1{

        width: .895rem;
        height: .72rem;

    }

    .cdk-2{
        width: .98rem;
        height: .515rem;

    }


    .cdk-kLeft{
        float: left;
        width: 1.96rem;
        height: 1.05rem;

    }

    .bac-haveUsed{
        background: #c2c2c2;
    }

    .bac-noUsed{
        background: #db3652;
    }

    .cdk-kRight{
        float: left;
        width: 1rem;
        height: 1rem;
        background: inherit;
    }

    .cdk-borderContainer{
        float: left;
        width: .1rem;
        height: auto;
    }


    .cdk-borderLRd{
        display: block;
        width: .09rem;
        height: .09rem;
        border-radius: 50%;
        background: #fff;
        border-right:1px solid #cccccc ;
        margin-left: -.05rem;
        margin-top: .07rem;
    }

    .cdk-borderRRd{
        display: block;
        width: .09rem;
        height: .09rem;
        border-radius: 50%;
        background: #fff;
        border-left:1px solid #cccccc ;
        margin-left: .96rem;
        margin-top: .075rem;
    }

    .cdk-wrap{

        width: 1.635rem;
        height: auto;
        margin-left: .115rem;
    }

    .cdk-wrap li{
        width:100%;
        color: #fff;
        font-size: .115rem;
        letter-spacing: 1px;
        line-height: .185rem;
    }
    .cdk-wrap li:first-child{
        line-height: .42rem;
    }

    .cdk-wrap li:first-child span{
        font-size: .325rem;
        letter-spacing: .025rem;
        font-weight: 500;
        line-height: inherit;
    }

    .cdk-time{
        width: .83rem;
        border-bottom: 1px solid #999999;
        margin: 0 auto;
        margin-top: .125rem;
        text-align: center;
        line-height: .175rem;
        font-size: .105rem;
        color: #999999;

    }

    .cdk-deleteKey{
        margin: 0 auto;
        width: .83rem;
        height: auto;
        line-height: .26rem;
        text-align: center;


    }

    .cdk-useNow{
        margin: 0 auto;
        width: .83rem;
        height: auto;
        line-height: .46rem;
    }

    .cdk-useNow a{
        color: #db3652;
        font-size: .13rem;
        text-decoration: none;
    }

    .cdk-deleteKey a{
        color: #db3652;
        font-size: .13rem;
        text-decoration: none;
    }

    .cdk-nomore{
        margin: 0 auto;
        width: 1.1rem;
        border-radius: 5px;
        height:.19rem;
        background: #dbdbdb;
        font-size: .10rem;
        text-align: center;
        line-height: .19rem;
        color: #fff;
        margin-top: .39rem;
    }

    .cdk-tips{
        position: relative;
        width: 100%;
        height: .3rem;
        background: #faf1d4 url("../images/lb.png") .2rem center no-repeat;
        background-size: .2rem .17rem;
        font-size: .105rem;
        line-height: .3rem;
        text-indent: .38rem;
        color: #333333;

    }

    .cdk-tips span,.cdk-tips a{
        color: #db3652;
    }

    .tipClose{
        position: absolute;
        display: block;
        right: 0;
        top:0;
        font-style: normal;
        font-size: .22rem;
        line-height: .3rem;
        text-align: center;
        margin-right: .15rem;
    }

    .sdk-expire{
        position: absolute;
        width: .74rem;
        height: .15rem;
        left: 30%;
        top:-.1rem;
        border-radius: 15px;
        background: #ffa538;
        text-align: center;
        font-size: .1rem;
        color: #fff;
        line-height: .15rem;

    }




    .sdk-expire:before{
        content: '';
        left: .1rem;
        top:.142rem;
        position: absolute;
        width: 0;
        height: 0;
        border-width: .1rem .05rem .1rem .05rem;
        border-style:solid;
        border-color:transparent transparent #ffa538 #ffa538;
        -webkit-transform: rotate(180deg) scale(-1,1);
        -moz-transform: rotate(180deg) scale(-1,1);
        transform: rotate(180deg) scale(-1,1);
    }

    .cdk-container .cdk-body{
        padding-top: 39px;
    }

    .cdk-container .cdk-body .m-simpleHeader a{
        font-size:100%;
        vertical-align: middle;
        top:-4px;
    }

    .cdk-container .cdk-body .m-simpleHeader a .cdk-back{
        display: inline-block;
        width: 11px;
        height: 11px;
        border-width: 0 0 2px 2px;
        border-style:solid;
        border-color:#8a8a8a;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        vertical-align: middle;
    }

    .cdk-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.6);
    }
    .cdk-client-pop {
        position: fixed;
        width: 1.45rem;
        max-height: 80%;
        left: 50%;
        /*margin-left: -145px;*/
        top: 50%;
        /*margin-top: -50px;*/
        display: -webkit-box;
        display: box;
        -webkit-box-orient:vertical;
        box-orient:vertical;
        background: rgba(255, 255, 255, .95);
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        -webkit-transform: scale(1.3) translate3d(-50%,-50%,0);
        -moz-transform: scale(1.3) translate3d(-50%,-50%,0);
        transform: scale(1.3) translate3d(-50%,-50%,0);
        opacity: 0;
        -webkit-transition-duration: .1s, .1s;
        -webkit-transition-timing-function: linear, linear;
        -webkit-transition-property: -webkit-transform, opacity;
    }
    .cdk-client-pop-show {
        opacity: 1;
        -webkit-transform: scale(1) translate3d(-50%,-50%,0);
        -moz-transform: scale(1) translate3d(-50%,-50%,0);
        transform: scale(1) translate3d(-50%,-50%,0);
    }
    .cdk-client-pop p {

        padding: .075rem .1rem;
        text-align: center;
        line-height: .2rem;
        font-size: 14px;
        -webkit-box-flex: 1.0;
        overflow: auto;
    }
    .cdk-client-btns {
        height: .225rem;
        font-size: 14px;
        display: -webkit-box;
        border-top: #dfdfdf solid 1px;
        -webkit-box-flex: 0.0;
    }
    .cdk-client-btns a {
        font-size: 14px;
        display: block;
        -webkit-box-flex: 1.0;
        text-align: center;
        line-height: .225rem;
        color: #007aff;
        border-right: #dfdfdf solid 1px;
        width: 50%;
    }
    .cdk-client-btns a:active {
        background: rgba(0, 0, 0, .05);
    }
    .cdk-client-btns a:last-child {
        border-right: 0 none;
    }

</style>

<template>

    <div class="cdk-container" v-show="isShowCoupon">
        <div class="cdk-body">
           <header-component :page-name="pageName"></header-component>
            <div class="cdk-head">
                <button class="cdk-nUse" :style="{background:show?'#db3652':'#fff',color:show?'#fff':'#db3652'}" @click="show=true">可使用的优惠券</button>
                <button class="cdk-yUse" :style="{background:show?'#fff':'#db3652',color:show?'#db3652':'#fff'}" @click="show=false">已使用/已过期</button>
                <div class="cdk-message" @click="show=true"></div>
                <div class="cdk-circle">{{unused.item.length}}</div>
            </div>
            <div class="cdk-tips" v-show="isTip&&allowed.item.length>0">
                您有<span>{{allowed.item.length}}</span>张优惠券可以领取，
                <a class="coupon_allowed_give" href="javascript:;" @click="isShowCoupon=false">立即领取</a>
                <i class="tipClose" @click="isTip=false">×</i>
            </div>

            <div class="cdk-show" v-show="!show">
                <template v-if="!!used.item">
                    <div id="coupon_{{i.id}}" class="cdk-myKey" v-for="(k,i) in used.item">
                        <div class="cdk-kLeft bac-haveUsed">
                            <div class="cdk-borderContainer">
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                            </div>
                            <ul class="cdk-wrap">
                                <li>￥<span>{{i.money}}</span>{{i.title}}</li>
                                <li>&nbsp;&nbsp;单个商品满<span>{{i.min_consumer}}</span>元使用</li>
                                <li>【适用<span>{{i.use_desc}}</span>商品】</li>
                            </ul>

                            <img v-if="i.is_use == 1" src="../images/status_2.png" class="cdk-status cdk-2"/>

                            <img v-else src="../images/status_1.png" class="cdk-status cdk-1"/>

                        </div>
                        <div class="cdk-kRight">
                            <div class="cdk-borderContainer">
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                            </div>

                            <div class="cdk-time">使用有效期：<br/><span>{{i.use_start_time}}</span>至<br/><span>{{i.use_end_time}}</span></span></div>

                            <p class="cdk-deleteKey"><a class="hideCoupon" data-id="{{i.id}}" href="javascript:;" @click="delMyCoupon">删除本券</a></p>
                        </div>
                    </div>

            </template>
                <div class="cdk-nomore ">没有更多了</div>
            </div>
            <div class="cdk-show" v-show="show">
                <template v-if="!!unused.item">
                   <div class="cdk-myKey" v-for="(k,i) in unused.item">
                       <div class="cdk-kLeft bac-noUsed">
                           <div class="sdk-expire"><span>{{i.over_day}}</span>天后过期</div>
                           <div class="cdk-borderContainer">
                               <span class="cdk-borderLRd"></span>
                               <span class="cdk-borderLRd"></span>
                               <span class="cdk-borderLRd"></span>
                               <span class="cdk-borderLRd"></span>
                               <span class="cdk-borderLRd"></span>
                               <span class="cdk-borderLRd"></span>
                           </div>
                           <ul class="cdk-wrap">
                               <li>￥<span>{{i.money}}</span>{{i.title}}</li>
                               <li>&nbsp;&nbsp;单个商品满<span>{{i.min_consumer}}</span>元使用</li>
                               <li>【适用<span>{{i.use_desc}}</span>商品】</li>
                           </ul>
                       </div>
                       <div class="cdk-kRight">
                           <div class="cdk-borderContainer">
                               <span class="cdk-borderRRd"></span>
                               <span class="cdk-borderRRd"></span>
                               <span class="cdk-borderRRd"></span>
                               <span class="cdk-borderRRd"></span>
                               <span class="cdk-borderRRd"></span>
                               <span class="cdk-borderRRd"></span>
                           </div>

                           <div class="cdk-time">使用有效期：<br/><span>{{i.use_start_time}}</span>至<br/><span>{{i.use_end_time}}</span></span></div>
                           <p class="cdk-useNow"><a data-href="?c=list" href="javascript:;" v-link="{path:'/list'}">立即使用</a><span class="trangleRight"></span></p>
                       </div>
                   </div>
                </template>
                <div class="cdk-nomore">没有更多了</div>
            </div>

        </div>
    </div>

    <div id="coupon_allowed" class="cdk-container" v-show="!isShowCoupon">
        <div class="cdk-body">
           <header-component page-name="领取优惠券"></header-component>
            <div class="cdk-tips">
                您有<span>{{allowed.item.length}}</span>张优惠券可以领取，点击
                <a data-href="?c=coupon" href="javascript:;" @click="isShowCoupon=true">查看我的优惠券</a>
            </div>
            <div class="cdk-show">
                <template v-if="!!allowed.item">
                    <div id="allowed_{{i.id}}" class="cdk-myKey" v-for="(k,i) in allowed.item">
                        <div class="cdk-kLeft bac-noUsed">
                            <div class="cdk-borderContainer">
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                                <span class="cdk-borderLRd"></span>
                            </div>
                            <ul class="cdk-wrap">
                                <li>￥<span>{{i.money}}</span>{{i.title}}</li>
                                <li>&nbsp;&nbsp;单个商品满<span>{{i.min_consumer}}</span>元使用</li>
                                <li>【适用<span>{{i.use_desc}}</span>商品】</li>
                            </ul>
                        </div>
                        <div class="cdk-kRight">
                            <div class="cdk-borderContainer">
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                                <span class="cdk-borderRRd"></span>
                            </div>

                            <div class="cdk-time">领取有效期：<br/><span>{{i.get_start_time}}</span>至<br/><span>{{i.get_end_time}}</span></span></div>
                            <p class="cdk-deleteKey"><a class="coupon_allowed_receive" data-id="{{i.id}}"  href="javascript:;" @click="getCoupon($event,$index)">领取优惠券</a></p>
                        </div>
                    </div>
                </template>

                <div class="cdk-nomore ">没有更多了</div>
            </div>
        </div>
    </div>
    <pop
            :status-pop = "statusPop"
            :msg = "msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>

    </pop>
</template>
<script>
    import pop from '../components/pop'
    import User from '../module/user'
    import headerComponent from '../components/header'
    module.exports = {
        data() {
            return {

                statusPop:false,
                msg:'',
                unused:{},
                allowed:{},
                used:{},
                show:false,
                pageName:'优惠券',
                isTip:true,
                isShowCoupon:true

            }
        },
        components: {

            pop,
            headerComponent

        },
        created(){

            this.$dispatch('isLoading', true);

        },
        async ready() {

            let res = await User.getUserCoupon('1');

            this.unused = Object.assign({},this.unused,res.data.unused);

            this.allowed = Object.assign({},this.allowed,res.data.allowed);

            this.used = Object.assign({},this.used,res.data.used);

            this.$dispatch('isLoading', false);

        },

        beforeDestroy() {

        },
        methods: {

            async delMyCoupon(e){

                let cid = e.target.dataset.id;

                let res = await User.hideMyCoupon(cid);

                if (res.status != 200) {

                    this.statusPop = true;

                    this.msg = '删除本券失败'

                }

            },

            async getCoupon(e,i){

                let id = e.target.dataset.id

                let res = await User.receiveUsedCoupon(id)

                if (res.status != 200) {

                    this.statusPop = true;

                    this.msg = '领取失败'

                } else {

                    this.statusPop = true;

                    this.msg = res.msg;

                    this.allowed.item.splice(i,1)

                }

            }


        }
    }
</script>
